import React from 'react';
import { Descriptions, Row, Col, Modal, Button, Input } from "antd";
import TheButton from '@/components/TheButton';
import TheImage from "@/components/TheImage";
import VideoPlayer from "@/components/VideoPlayer"
import '../style/style.scss';
const { TextArea } = Input;

export default class OrderInfo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      orderInfo: props.orderInfo, //数据信息
      keyStorageModal: false, //钥匙存放弹窗
      warnModal: false, //叮嘱信息弹窗
      ketType: '',// 钥匙存放方式,
      payChannel: '',// 支付方式
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  // 数据处理
  getData = async () => {
    let { orderInfo } = this.props
    if (orderInfo) {
      // payWay支付方式  
      let payChannel = ''
      switch (orderInfo.payChannel) {
        case 'WECHAT':
          payChannel = '微信'
          break;
        case 'ALI':
          payChannel = '支付宝'
          break;
        default:
          payChannel = "-"
      }
      this.setState({ orderInfo, payChannel })
    }
  }
  //播放视频
  videoDialog = (URL) => {
    Modal.confirm({
      title: '视频预览',
      icon: "",
      content: <VideoPlayer src={URL} />,
      cancelText: '关闭',
      width: "535px",
      maskClosable: true,
      closable: true,
      okButtonProps: { style: { display: "none" } },
      cancelButtonProps: { style: { display: "none" } },
    })
  }

  render() {
    const { orderInfo, keyStorageModal, warnModal, payChannel } = this.state
    return (
      <div style={{ margin: '20px 0' }}>
        <Descriptions layout="vertical" bordered column={4}>
          <Descriptions.Item label="地址信息">
            <Row gutter={12}>
              <Col>宠主姓名:</Col>
              <Col>{orderInfo.userName}</Col>
            </Row>
            <Row gutter={12}>
              <Col>宠主电话:</Col>
              <Col>{orderInfo.userMobile}</Col>
            </Row>
            <Row gutter={12}>
              <Col>服务地址:</Col>
              <Col><div style={{ width: 300 }}>{orderInfo.province}{orderInfo.city}{orderInfo.district}{orderInfo.address}</div></Col>
            </Row>
          </Descriptions.Item>
          <Descriptions.Item label="付款信息">
            <Row gutter={12}>
              <Col>实付金额:</Col>
              <Col><React.$price price={orderInfo.payAmount || 0} /></Col>
            </Row>
            <Row gutter={12}>
              <Col>付款方式:</Col>
              <Col>{payChannel}</Col>
            </Row>
            <Row gutter={12}>
              <Col>付款时间:</Col>
              <Col>{orderInfo.payTime ? orderInfo.payTime : '-'}</Col>
            </Row>
          </Descriptions.Item>
          <Descriptions.Item label="买家信息">
            <Row gutter={12}>
              <Col >买家ID:</Col>
              <Col>{orderInfo.memberId}</Col>
            </Row>
            <Row gutter={12}>
              <Col >买家昵称:</Col>
              <Col>{orderInfo.memberNick}</Col>
            </Row>
          </Descriptions.Item>
          <Descriptions.Item label="其他信息">
            <Row gutter={12}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Col>钥匙信息:</Col>
                <Col>
                  {
                    <Row gutter={10}>
                      <Col>{orderInfo.keyInfoObj ? '已设置' : '未设置'}</Col>
                      {orderInfo.keyInfoObj && <Col><TheButton onClick={() => { this.setState({ keyStorageModal: true }) }}>查看</TheButton></Col>}
                    </Row>
                  }
                </Col>
              </div>
            </Row>
            <Row gutter={12}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Col>叮嘱信息:</Col>
                <Col>
                  {
                    <Row gutter={10}>
                      <Col>{orderInfo.remarkObj ? '已设置' : '未设置'}</Col>
                      {orderInfo.remarkObj && <Col><TheButton onClick={() => { this.setState({ warnModal: true }) }}>查看</TheButton></Col>}
                    </Row>
                  }
                </Col>

              </div>

            </Row>
          </Descriptions.Item>
        </Descriptions>
        <Modal width={'30%'} title="钥匙存放" open={keyStorageModal} onOk={() => { this.setState({ keyStorageModal: false }) }}
          onCancel={() => { this.setState({ keyStorageModal: false }) }}
          footer={[<Button onClick={() => { this.setState({ keyStorageModal: false }) }}>我知道了</Button>]}>
          {
            // 钥匙存放方式 家里有人 AT_HOME 密码锁 PASSWORD  指定位置 DESIGNATED_SPOT
            orderInfo.keyInfoObj && <div>
              {orderInfo.keyInfoObj.keyType === 'AT_HOME' &&
                <div>
                  <p>钥匙存放方式</p>
                  <Button danger style={{ color: 'black', borderRadius: '5px' }}>家里有人</Button>
                </div>
              }
              {orderInfo.keyInfoObj.keyType === 'PASSWORD' &&
                <div>
                  <p>钥匙存放方式</p>
                  <Button danger >密码锁</Button>
                  <p>密码锁密码</p>
                  <div className='password'>
                    <span>密码</span>
                    <span style={{ color: '#aaaaaa' }}>{orderInfo.keyInfoObj.keyInfo}</span>
                  </div>
                </div>
              }
              {orderInfo.keyInfoObj.keyType === 'DESIGNATED_SPOT' &&
                <div>
                  <p>钥匙存放方式</p>
                  <Button danger >藏于指定位置</Button>
                  <p>钥匙位置图片或者视频</p>
                  {
                    (orderInfo.keyInfoObj.fileType && orderInfo.keyInfoObj.keyInfo) && <div className='imageKey'>
                      {orderInfo.keyInfoObj.fileType === 'video' && <TheImage
                        preview={{ visible: false }}
                        src={orderInfo.keyInfoObj.keyInfo + "?x-oss-process=video/snapshot,t_1000,m_fast"}
                        width={80} height={80}
                        onClick={() => {
                          this.videoDialog(orderInfo.keyInfoObj.keyInfo)
                        }}
                      />}
                      {orderInfo.keyInfoObj.fileType === 'img' && <TheImage src={orderInfo.keyInfoObj.keyInfo} width={80} height={80} />}
                    </div>
                  }
                </div>
              }
            </div>
          }
        </Modal>
        {/* 叮嘱信息 */}
        <Modal width={'30%'} title="服务叮嘱" open={warnModal} onOk={() => { this.setState({ warnModal: false }) }}
          onCancel={() => { this.setState({ warnModal: false }) }}
          footer={[<Button onClick={() => { this.setState({ warnModal: false }) }}>我知道了</Button>]}>
          {
            orderInfo.remarkObj && <div>
              {
                orderInfo.remarkObj.dietaryLocation && <div>
                  <p>{`饮食位置(${orderInfo.remarkObj.dietaryLocation.length}/3)`}</p>
                  {
                    orderInfo.remarkObj.dietaryLocation.map(item => {
                      return item.fileType === 'img' && <TheImage src={item.fileUrl} width={80} height={80} />
                    })
                  }
                </div>
              }
              {
                orderInfo.remarkObj.toiletLocation && <div>
                  <p>{`厕所位置(${orderInfo.remarkObj.toiletLocation.length}/3)`}</p>
                  {
                    orderInfo.remarkObj.toiletLocation.map(item => {
                      return item.fileType === 'img' && <TheImage src={item.fileUrl} width={80} height={80} />
                    })
                  }
                </div>
              }
              {
                orderInfo.remarkObj.other && <div>
                  <p>{`其他需求(${orderInfo.remarkObj.other.length}/3)`}</p>
                  {
                    orderInfo.remarkObj.other.map(item => {
                      return item.fileType === 'img' && <TheImage src={item.fileUrl} width={80} height={80} />
                    })
                  }
                </div>
              }
              <p></p>
              {
                orderInfo.remarkObj.remark && <TextArea
                  value={orderInfo.remarkObj.remark}
                  autoSize={{ minRows: 3, maxRows: 6 }}
                  disabled
                />
              }
            </div>
          }

        </Modal>
      </div >
    )
  }
}